<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>云博客登录页面</title>
    <script src="/js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" href="/js/login/css/normalize.css">
    <link rel="stylesheet" href="/js/login/css/login.css">
    <link rel="stylesheet" href="/js/login/css/sign-up-login.css">
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/login/css/inputEffect.css" />
    <link rel="stylesheet" href="/js/login/css/tooltips.css" />
    <link rel="stylesheet" href="/js/login/css/spop.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="/js/login/js/jquery.min.js"></script>
    <!--
        <script src="/js/snow.js"></script>
    -->
    <script src="/js/login/js/jquery.pure.tooltips.js"></script>
    <script src="/js/login/js/spop.min.js"></script>
    <script src="/js/login/js/layer/layer.js"></script>

<script>
    $(function(){


        $("#login-username").val("[[${name}]]")
        $("#login-password").val("[[${pwd}]]")
        refresh();
        getCookie()


    })
    //获取后台存入的cookie的账号 密码
    function getCookie() {

        var zhanghao="";
        var mima="";
        // 对cookie操作
        var cookies = document.cookie;
        var cook=cookies.split(";")
        for(var i=0;i<cook.length;i++){
            var coo=cook[i].split("=")
            for(var j=0;j<coo.length;j++){
                if(coo[j].indexOf("user_Loginacct")>-1){
                    zhanghao=coo[1];
                }
                if(coo[j].indexOf("user_pwd")>-1){
                    mima=coo[1]
                }
            }
        }
        $("#login-username").val(zhanghao)
        $("#login-password").val(mima)
        if( $("#login-password").val()!=null&& $("#login-password").val()!=""){
            $("#JiZhuMiMa").prop("checked",true);

        }
    }


    $(function() {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function() {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function() {
                    return this.replace(rtrim, '');
                };
            });
        }

        [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
            // in case the input is already filled..
            /*if( inputEl.value.trim() !== '' ) {
                classie.add( inputEl.parentNode, 'input--filled' );
            }*/

            // events:
            /* inputEl.addEventListener( 'focus', onInputFocus );
             inputEl.addEventListener( 'blur', onInputBlur );*/
        } );

        /*function onInputFocus( ev ) {
            classie.add( ev.target.parentNode, 'input--filled' );
        }*/

        function onInputBlur( ev ) {
            /*if( ev.target.value.trim() === '' ) {
                classie.remove( ev.target.parentNode, 'input--filled' );
            }*/
        }
    })

    $(function() {
        $('#login #login-password').focus(function() {
            $('.login-owl').addClass('password');
        }).blur(function() {
            $('.login-owl').removeClass('password');
        });
        $('#login #register-password').focus(function() {
            $('.register-owl').addClass('password');
        }).blur(function() {
            $('.register-owl').removeClass('password');
        });
        $('#login #register-repassword').focus(function() {
            $('.register-owl').addClass('password');
        }).blur(function() {
            $('.register-owl').removeClass('password');
        });
        $('#login #forget-password').focus(function() {
            $('.forget-owl').addClass('password');
        }).blur(function() {
            $('.forget-owl').removeClass('password');
        });
    });

    function goto_register(){
        $("#register-username").val("");
        $("#register-password").val("");
        $("#register-repassword").val("");
        $("#register-code").val("");
        $("#tab-2").prop("checked",true);
    }

    function goto_login(){
        $("#login-username").val("");
        $("#login-password").val("");
        $("#tab-1").prop("checked",true);
    }

    function goto_forget(){
        $("#forget-username").val("");
        $("#forget-password").val("");
        $("#forget-code").val("");
        $("#tab-3").prop("checked",true);
    }

    function login(){//登录
        if( $("#JiZhuMiMa").prop("checked")){

            $("#JiZhuMiMa").val(1)

        }else{
            $("#JiZhuMiMa").val(2)

        }
        var username = $("#login-username").val(),
            password = $("#login-password").val(),
            validate = $("#login-validate").val(),

            RememberPswd=$("#JiZhuMiMa").val(),

            flag = false;
        //判断用户名密码是否为空
        if(username == ""){
            $.pt({
                target: $("#login-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#login-password"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"密码不能为空"
            });
            flag = true;
        }
        //用户名只能是15位以下的字母或数字
        var regExp = new RegExp("^[\u4e00-\u9fa5-a-zA-Z0-9_]{1,15}$");
        if(!regExp.test(username)){
            $.pt({
                target: $("#login-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名必须为15位以下的字母或数字汉字也是可以的"
            });
            flag = true;
        }

        if(flag){
            return false;
        }else{//登录
            //调用后台登录验证的方法
            $.post('/view/toLogin',{staffName:username,staffPwd:password,code:validate,RememberPswd:RememberPswd},function(data){
                if(data==1){
                    alert("您输入验证信息异常");
                    refresh()
                } else if(data == 3) {
                    alert("您输入用户名不存在");
                    refresh()
                }else if(data == 4) {
                    alert("您输入密码输入错误");
                    refresh()
                }else if(data == 5) {
                    alert("您输入验证码错误，请确认");
                    refresh()
                } else {
                    location.href="/view/toView?viewName=index";
                }
            })
            return false;
        }
    }

    //注册
    function register(){
        var username = $("#register-username").val(),
            password = $("#register-password").val(),
            repassword = $("#register-repassword").val(),
            code = $("#register-code").val(),
            email = $("#register-email").val(),

            flag = false,
            validatecode = null;
        //判断用户名密码是否为空
        if(username == ""){
            $.pt({
                target: $("#register-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#register-password"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"密码不能为空"
            });
            flag = true;
        }else{
            if(password != repassword){
                $.pt({
                    target: $("#register-repassword"),
                    position: 'r',
                    align: 't',
                    width: 'auto',
                    height: 'auto',
                    content:"两次输入的密码不一致"
                });
                flag = true;
            }
        }
        //用户名只能是15位以下的字母或数字
        var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
        if(!regExp.test(username)){
            $.pt({
                target: $("#register-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名必须为15位以下的字母或数字"
            });
            flag = true;
        }

       /* //判断是不是一个合法的手机号
        var zz = /^1[3||5||7||8]\d{9}$/;
        if(!zz.test(code)){
            $.pt({
                target: $("#register-code"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"请输入一个合法的手机号"
            });
            flag = true;
        }*/
        //判断是不是一个合法的邮箱
        /*var emailReg=/^[0-9]{1,12}@qq\.(com|con)$/;
        if(!emailReg.test(email)){
            $.pt({
                target: $("#register-email"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"请输入一个合法的邮箱地址"
            });
            flag = true;
        }*/
        if(flag){
            return false;
        }else{
            //注册
            $.post('/view/goRegister',{staffName:username,staffPwd:password,userPhone:code,email:email},function(data){
                if(data==1){
                    spop({
                        template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
                        position: 'top-center',
                        style: 'success',
                        autoclose: 3000,
                        onOpen : function(){
                            var second = 2;
                            var showPop = setInterval(function(){
                                if(second == 0){
                                    clearInterval(showPop);
                                }
                                $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录');
                                second--;
                            },1000);
                        },
                        onClose : function(){
                            goto_login();
                        }
                    });
                } else if(data==2){
                    alert("此号已被良家拥有");
                }
            })
            return false;
        }
    }

    //重置密码
    function forget(){
        var username = $("#forget-username").val(),
            password = $("#forget-password").val(),
            code = $("#forget-code").val(),
            flag = false,
            validatecode = null;
        //判断用户名密码是否为空
        if(username == ""){
            $.pt({
                target: $("#forget-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $.pt({
                target: $("#forget-password"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"密码不能为空"
            });
            flag = true;
        }
        //用户名只能是15位以下的字母或数字
        var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
        if(!regExp.test(username)){
            $.pt({
                target: $("#forget-username"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名必须为15位以下的字母或数字"
            });
            flag = true;
        }
        //检查用户名是否存在
        //调后台方法

        //检查注册码是否正确
        if(code != '11111111'){
            $.pt({
                target: $("#forget-code"),
                position: 'r',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"注册码不正确"
            });
            flag = true;
        }
        if(flag){
            return false;
        }else{//重置密码
            spop({
                template: '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录',
                position: 'top-center',
                style: 'success',
                autoclose: 3000,
                onOpen : function(){
                    var second = 2;
                    var showPop = setInterval(function(){
                        if(second == 0){
                            clearInterval(showPop);
                        }
                        $('.spop-body').html('<h4 class="spop-title">重置密码成功</h4>即将于'+second+'秒后返回登录');
                        second--;
                    },1000);
                },
                onClose : function(){
                    goto_login();
                }
            });
            return false;
        }
    }

    function refresh(){
        $("#img").prop("src","/view/getCode?random="+new Date());
    }


</script>
<style type="text/css">
    html{width: 100%; height: 100%;}

    body{

        background-repeat: no-repeat;

        background-position: center center #2d150d;

        background-color: #00BDDC;


        background-size: 100% 100%;

    }

/*

            .snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; }

*/

</style>
</head>
<body background="/js/img/4.jpg">

<!-- 登录控件 -->
<div id="login">
    <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
    <input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
    <input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
    <div class="wrapper">
        <!-- 登录页面 -->
        <div class="login sign-in-htm">
            <form class="container offset1 loginform">
                <!-- 猫头鹰控件 -->
                <div id="owl-login" class="login-owl">
                    <div class="hand">${msg}</div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username"
                                       autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-validate" placeholder="请输入验证码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <!-- 自动登录开始fore4 -->
                        <div class="item item-fore4">
                            <div class="safe">
                        		<span>
                        			<input type="checkbox" name="RememberPswd" id="JiZhuMiMa" tabindex="3">
                        			<label for>记住密码</label>
                        		</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <span class="forget-pw-safe">
                        			<a href="#">忘记密码</a>
                        		</span>
                            </div>
                        </div>

                    </section>
                </div>
<!--//=========获取随机验证码-->

                <img id="img" onclick="refresh()" src="/view/getCode" width="200px" height="80px">
                <a href="javascript:refresh()">看不清，换一张</a>
                <div class="form-actions">
                    <a tabindex="4" class="btn pull-left btn-link text-muted" onClick="goto_forget()">快捷短信认证登录</a>
                    <a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a>
                    <input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录"
                           style="color:white;"/>
                </div>
            </form>
        </div>
        <!-- 忘记密码页面  快捷短信认证登录-->
        <div class="login sign-out-htm">
            <form action="#" method="post" class="container offset1 loginform">
                <!-- 猫头鹰控件 -->
                <div id="owl-login1" class="forget-owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="phoneNumber" autocomplete="off" placeholder="手机号"/>
								<label class="input__label input__label--hideo" for="forget-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="btn btn-primary" type="button" tabindex="3" onClick="security()" value="点击获取验证码" style="color:white;" id="messageButtonId"/>
                            <!-- 				<input class="input__field input__field--hideo" type="text" id="forget-code" autocomplete="off" placeholder="点击获取验证码" /> -->
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="enroll" autocomplete="off" placeholder="请输入获取的注册码"/>
								<label class="input__label input__label--hideo" for="forget-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <!-- 			<span class="input input--hideo">
                                        <input class="input__field input__field--hideo" type="password" id="forget-password" placeholder="请重置密码" />
                                        <label class="input__label input__label--hideo" for="forget-password">
                                            <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                            <span class="input__label-content input__label-content--hideo"></span>
                                        </label>
                                    </span> -->
                    </section>
                </div>
                <div class="form-actions">
                    <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
                    <input class="btn btn-primary" type="button" onClick="enter()" value="登录"
                           style="color:white;"/>
                    <!-- <input class="btn btn-primary" type="button" onClick="forget()" value="重置密码"
                        style="color:white;"/> -->
                </div>
            </form>
        </div>
        <!-- 注册页面 -->
        <div class="login sign-up-htm">
            <form action="#" method="post" class="container offset1 loginform">
                <!-- 猫头鹰控件 -->
                <div id="owl-login2" class="register-owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                        <div class="arm"></div>
                        <div class="arm arm-r"></div>
                    </div>
                </div>
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-username"
                                       autocomplete="off" placeholder="请输入账号" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请确认密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-code" autocomplete="off" placeholder="请输入手机号"/>
								<label class="input__label input__label--hideo" for="register-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-email" autocomplete="off" placeholder="请输入邮箱"/>
								<label class="input__label input__label--hideo" for="register-email">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                    </section>
                </div>
                <div class="form-actions">
                    <a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
                    <input class="btn btn-primary" type="button" onClick="register()" value="注册"
                           style="color:white;"/>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="none">
    //用于后台获取验证码

    //1.设置倒计时时长---不加var时，就是全局变量
    var time = 60;
    var timer=null;
    function fun(){
        //3.不可再点击
        $("#messageButtonId").attr('disabled',true);
        time--;
        if(time>=0){
            //alert(time)
            $("#messageButtonId").attr('value',time+'s后重新发送')
        }else{//输入验证码超时
            $("#messageButtonId").attr('value','请重新发送')
            $("#messageButtonId").attr('disabled',false);
            //清楚定时器
            clearTimeout(timer);
        }
    }

    function security(){
        var phoneNumber = $('#phoneNumber').val()
        if(phoneNumber==null){
            return alert("手机号不能为空");
        }

        $.ajax({                                      /* verification 验证码的意思 */
            url:'/view/getCodeByPhone',
            type:'post',
            data:{
                userPhone:$('#phoneNumber').val(),
            },
            dataType:'json',
            success:function(result){
                console.log(result)
                if(result.code==1){ //验证码发送成功  开始倒计时
                    $("#messageButtonId").prop("disabled",true)
                    temp = setInterval("fun()",1000);
                    layer.alert('验证码发送成功 请看手机 开始倒计时', {icon: 6});
                }else if(result.code==2){
                    $("#messageButtonId").prop("disabled",true)
                    layer.alert('50秒之内已获取过验证码,请查看手机', {icon: 6});
                }else if(result.code==4){
                    $("#messageButtonId").prop("disabled",true)
                    layer.alert('5分钟之内最多获取三次手机号!您已超限', {icon: 6});
                }
                if(result.exists_phone==0){

                    layer.alert('您的手机号还未注册!!请注册', {icon: 6});

                    return
                }

                if(result.heMingDan_phone==1){


                    layer.alert('您的手机号已被拉入黑名单', {icon: 6});
                    return

                }

                //2.设置定时器
                timer = setInterval(fun(),1000);


            }
        })


    }

    //手机号登录
    function enter(){
        //验证码
        var enroll = $("#enroll").val();
        //手机号
        var phoneNumber = $('#phoneNumber').val();
        //判断用户名密码是否为空
        if(phoneNumber == "" || phoneNumber == null){
            return alert("手机号不能为空");
        }
        if(enroll == "" || enroll == null){
            return alert("验证码不能为空");
        }
        $.ajax({
            url:'/view/checkCode',
            type:'post',
            data:{
                userPhone:$('#phoneNumber').val(),
                getCode:$("#enroll").val()
            },
            dataType:'json',
            success:function(pm){
                if(pm == 1){
                    alert("登录成功");
                    location.href = "/view/toView?viewName=index";
                }else if(pm == 0){
                    alert("登录失败");
                }
            }
        })
    }
</script>
</body>



<!--<body>
   <input th:value="${session?.msg}">
    <form method="post" action="/view/toLogin">
            <div id="username">
                <label>帐&nbsp;&nbsp;&nbsp;号：</label>
                <input type="text" name="staffName"/>
            </div>
            <div id="password">
                <label>密&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password"  name="staffPwd"/>
            </div>
            <div id="login">
                <input type="submit" value="权限登录" >
            </div>
        </form>

</body>
  <script type="text/javascript">
      $(function(){
          alert("[[${session?.msg}]]")
      })
  </script>-->


</html>